<template>
	<view>
		<u-swiper :list="swiper" keyName="image" :indicator="true" indicatorMode="dot" :circular="true"
			@click="gopath"></u-swiper>
		<view class="btns dis  aic jcc">
			<view class="btn" @click="runErrands">
				<view class="lable">发布需求</view>
				<image class="right" mode="widthFix" src=''></image>
				<view class="tips">代买陪聊天取快递陪打游戏</view>
			</view>
			<view class="btn" @click="goWallet">
				<view class="lable">我的（提现）</view>
				<image class="right" mode="widthFix" src=''></image>
				<view class="tips">在这里查看个人账户以及提现</view>
			</view>
		</view>
		<u-tabs :list="list1" @click="changeTabs" lineColor='#FBE43F'
			:inactiveStyle="{ fontSize: '32rpx', transform: 'scale(1)',color: '#979797'  }"
			:activeStyle="{ color: '#000000',fontSize: '40rpx', }">
		</u-tabs>
		<view class="roast" v-for="(item,index) in tabList" :key="index" @click="goDetail(item)">
			<view class="userinfo dis jcsb aic">
				<view class="dis aic">
					<view class="aravat">
						<image style="width: 100%;" :src="item.avatar ? item.avatar : '/static/icon/icon04.png'"
							mode="widthFix"></image>
					</view>
					<view class="">
						<view class="dis jss aic">
							<view class="username">{{item.nickName}}</view>
							<!-- <image class="live" src="/static/icon/live1.png" mode="widthFix"></image> -->
						</view>
						<view class="dis jss aic time">
							<view>{{item.createTime | monthDay }}</view>
							<view>{{item.createTime | hourMinute  }}</view>
						</view>
					</view>
				</view>
				<More></More>
			</view>
			<view class="centent">
				<text class="text">{{item.orderContent}}</text>
			</view>
			<view class="detail dis aic jcsb">
				<view class="price_lable">
					佣金
					<text class="price">￥{{item.amount}}</text>
				</view>
				<view class="state">
					<view class="bg">

					</view>
					<view class="text">
						{{item.orderStatus == 1 ? '未支付' :  item.orderStatus == 2 ? '待接单' : item.orderStatus == 3 ? '进行中' : item.orderStatus == 4 ? '已完成' : item.orderStatus == 5 ? '确认完成' : item.orderStatus == 6 ? '已取消' : ''}}
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import More from '@/compontents/More.vue'
	export default {
		components: {
			More,
		},
		props: {
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			swiper: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		filters: {
			// 提取月份和日期
			monthDay(value) {
				if (!value) return ''
				const datePart = value.split(' ')[0] || ''
				return datePart.substr(5)
			},

			// 提取时分并转换格式
			hourMinute(value) {
				if (!value) return ''
				const timePart = value.split(' ')[1] || ''
				return timePart.replace(/:\d+$/, '').replace(':', '.')
			}
		},
		data() {
			return {
				list1: [{
					name: '抢单大厅',
				}, {
					name: '我发布的',
				}, {
					name: '我帮助的'
				}],
				CurrentTabs: 0
			}
		},

		methods: {
			// 点击轮播图
			gopath(e) {
				console.log('点击轮播图', this.swiper[e]);
				if (this.swiper[e].imageUrl) {
					window.open(this.swiper[e].imageUrl)
				}
			},
			runErrands() {
				uni.navigateTo({
					url: '/pages/home/runErrands'
				})
			},
			goWallet() {
				uni.navigateTo({
					url: '/pages/my/wallet'
				})
			},
			changeTabs(e) {
				this.CurrentTabs = e.index
				this.$emit('change', e.index + 1)
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/index/orderDetail?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		margin-top: 30rpx;

		.btn {
			position: relative;
			padding: 16rpx 30rpx;
			box-sizing: border-box;
			margin: 0 22rpx;
			width: 320rpx;
			height: 109rpx;
			background: #F9EA69;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.lable {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.right {
				width: 10rpx;
				position: absolute;
				right: 46rpx;
				top: 30rpx;
			}

			.tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #000000;
			}
		}
	}

	.roast {
		padding: 30rpx;
		box-sizing: border-box;

		.userinfo {
			.aravat {
				width: 70rpx;
				height: 70rpx;
				border-radius: 70rpx;
				overflow: hidden;
				margin-right: 15rpx;
			}

			.live {
				width: 50rpx;
			}

			.more {
				width: 48rpx;
				height: 48rpx;
			}

			.username {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #858585;
				margin-top: 2rpx;

				view {
					margin-right: 10rpx;
				}
			}
		}

		.centent {
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #000000;
			}
		}

		.detail {
			margin-top: 10rpx;

			.price_lable {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #F36F38;
			}

			.price {
				font-size: 36rpx;
			}

			.state {
				position: relative;
				width: 120rpx;
				height: 50rpx;

				.text {
					position: absolute;
					top: 0;
					left: 20rpx;
				}

				.bg {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 123rpx;
					height: 24rpx;
					background: rgba(184, 255, 227, 0.6);
					border-radius: 19rpx 0rpx 0rpx 19rpx;
				}
			}

		}
	}
</style>